<template>
  <el-dialog
    :title="dialogTableTitle"
    v-loading="editLoading"
    :visible.sync="editDetailTableVisible"
    :close-on-click-modal="false"
    custom-class="dialogTableClassEdit"
    destroy-on-close
  >
    <el-row style="margin-top: 15px">
      <el-col :span="8" class="menuList">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        ></el-input>
        <el-card class="menuTree">
          <el-tree
            class="filter-tree"
            v-loading="treeDataLoading"
            :data="treeData"
            node-key="Id"
            highlight-current
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="menuTree"
            @node-click="getNodeData"
            :default-expanded-keys="menuNodeKey"
            :current-node-key="menuNodeKeyStr"
            default-expand-all
          >
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <span style="font-size: 18px">菜单</span>
          <el-form
            :label-position="labelPosition"
            label-width="150px"
            :rules="rules"
            :model="form"
            ref="form"
            class="menuBox"
          >
            <el-form-item label="菜单名称" prop="menuName">
              <el-input
                v-model="form.menuName"
                placeholder="请输入菜单名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="父级节点(左侧筛选)">
              <el-input
                v-model="form.menuParentName"
                disabled
                placeholder="请选择父级节点(空为一级目录)"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单链接" prop="menuUrl">
              <el-input
                v-model="form.menuUrl"
                placeholder="请输入菜单链接"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单标识" prop="menuRemark">
              <el-input
                v-model="form.menuRemark"
                placeholder="请输入菜单标识"
              ></el-input>
            </el-form-item>

            <!-- <el-form-item label="排序">
                      <el-input v-model="form.orderby" placeholder="请输入排序"></el-input>
                    </el-form-item> -->
            <el-form-item style="margin-bottom: 0px">
              <el-button type="primary" @click="save('form')">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="save('updateForm')">{{isAdd?'添加':'修改'}}</el-button> -->
      <el-button type="primary" @click="back()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { gettreelist , add , edit} from "@/api/menuManagement.js";
import { getList } from '@/api/system/menu'
export default {
  name: 'editDetail',
  data () {
    return {
      listQuery: {
        MenuName: "", //页面名称
        IsPaging: false, //是否分页
        SortName: "CreateDate", //排序栏位
        SortType: true //排序类型｛True：正序；Flase：反序｝
      },
      editLoading: false,
      inline: true,
      editDetailTableVisible: false,
      filterText: '',
      formStatus: '',
      list: null,
      formAdd: true,

      defaultProps: {
        children: 'ChildList',
        label: 'MenuName'
      },
      labelPosition: 'right',
      form: {
        menuType: undefined,
        menuName: undefined,
        menuParentId: undefined,
        menuParentName: undefined,
        menuUrl: undefined,
        menuRemark: undefined,
        IsPc: true
      },
      currentMenuId: '',
      isUpdate: false,
      rules: {
        menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        menuUrl: [{ required: true, message: '请输入菜单链接', trigger: 'blur' }],
        //   parent_id:[{ required: true, message: '请选择父级节点', trigger: 'change'}],
        menuRemark: [{ required: true, message: '请输入菜单标识', trigger: 'blur' }],
      },
      treeData: [
        {
          Id: undefined,
          MenuName: '一级目录'
        }
      ],
      treeDataLoading: true,
      menuNodeKey: [],
      menuNodeKeyStr: '',
      isAddOrIsUpdate: false
    }
  },
  props: {
    dialogTableTitle: {
      type: String,
      default: "新增菜单"
    },
    menuObj: {
      type: Object,
      default: {}
    },
    isAdd: {
      type: Boolean,
      default: true
    },
    isAddChild: {
      type: Boolean,
      default: true
    },
    systemType: {
      type: String,
      default: 'pc'
    }
  },
  components: {

  },
  computed: {

  },
  created () {
    this.isAddOrIsUpdate = false
    this.getMenuList()
    if (this.isAddChild) {
      this.currentMenuId = ''
      this.menuNodeKey = []
      this.form = {
        menuType: undefined,
        menuName: undefined,
        menuParentId: this.menuObj.Id,
        menuParentName: this.menuObj.MenuName,
        menuUrl: undefined,
        menuRemark: undefined,
        IsPc: true
      }
      let arr = []
      arr.push(this.menuObj.Id)
      this.menuNodeKeyStr = this.menuObj.Id
      this.menuNodeKey = arr
    } else if (this.isAdd) {
      this.currentMenuId = ''
      this.menuNodeKey = []
      this.form = {
        menuType: undefined,
        menuName: undefined,
        menuParentId: undefined,
        menuParentName: undefined,
        menuUrl: undefined,
        menuRemark: undefined,
        IsPc: true
      }
    } else {
      this.currentMenuId = this.menuObj.Id
      this.form = {
        menuType: this.menuObj.MenuParentId ? 1 : 0,
        menuName: this.menuObj.MenuName,
        menuParentId: this.menuObj.MenuParentId,
        menuParentName: this.menuObj.parentName,
        menuUrl: this.menuObj.MenuUrl,
        menuRemark: this.menuObj.MenuRemark,
        IsPc: this.menuObj.IsPc,
      }
      let arr = []
      if (this.menuObj.MenuParentId) {
        arr.push(this.menuObj.MenuParentId)
      }
      this.menuNodeKeyStr = this.menuObj.MenuParentId
      this.menuNodeKey = arr
    }
  },
  //监控data中的数据变化
  watch: {
    editDetailTableVisible (newValue, oldValue) {
      if (!newValue) {
        this.$emit("editDetailDialogEvent", this.isAddOrIsUpdate);
      }
    },
    'form.menuParentId': {
      handler (newVal) {
        if (newVal) {
          this.rules.menuUrl = [{ required: true, message: '请输入菜单链接', trigger: 'blur' }]
          this.rules.menuRemark = [{ required: true, message: '请输入菜单标识', trigger: 'blur' }]
        } else {
          this.rules.menuUrl = []
          this.rules.menuRemark = []
        }
      },
      immediate: true
    }
  },
  methods: {
    getMenuList () {
      let that = this;
      that.treeDataLoading = true
      that.treeData = [
        {
          Id: undefined,
          MenuName: '一级目录'
        }
      ]
      getList(that.listQuery).then((res) => {
        that.treeData = that.treeData.concat(res.Data)
        that.treeDataLoading = false
        console.log(that.treeData)
      }).catch(err => {
        if (err.Code == 202) {
          that.treeData = []
        }
      })
    },
    back () {
      this.$emit("editDetailDialogEvent", this.isAddOrIsUpdate);
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getNodeData (data) {
      console.log(data)
      this.form.menuParentId = data.Id
      this.form.menuParentName = data.MenuName
    },
    getList () {

    },
    handlerEdit () {

    },
    handlerAdd () {

    },
    save (formName) {
      let that = this
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.form.menuType = that.form.menuParentId ? 1 : 0
          if (that.isAdd) {
            add(that.form).then((res) => {
              this.$message({
                message: '创建菜单成功，您可以添加按钮权限了',
                type: 'success'
              });
              this.currentMenuId = res.Data
              this.isAddOrIsUpdate = true
              that.getMenuList()
            }).catch(err => {
              if (err.Code == 202) {
                this.$message({
                  message: err.Msg,
                  type: 'warning'
                });
              }
            })
          } else {
            that.form.menuType = that.form.menuParentId ? 1 : 0
            that.form.Id = that.menuObj.Id
            edit(that.form).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.isAddOrIsUpdate = true
              that.getMenuList()
            }).catch(err => {
              if (err.Code == 202) {
                this.$message({
                  message: err.Msg,
                  type: 'warning'
                });
              }
            })
          }
        } else {
          return false;
        }
      })
    },
    update () {

    },
    handleDelete () {

    },
    resetForm () {

    }
  },
  mounted () {
    this.editDetailTableVisible = true;
  }
}
</script>
<style lang="scss">
.dialogTableClassEdit {
  width: 90%;
  min-height: 50%;
  max-height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 0 !important;
}
.dialogTableClassEdit .el-dialog__body {
  padding: 0 20px;
  overflow: hidden;
  overflow-y: auto;
}
.dialogTableClassEdit .el-form--inline .el-form-item {
  width: 100%;
}
.dialogTableClassEdit .el-form-item__content {
  width: 70%;
}
.dialogTableClassEdit .el-select {
  width: 100%;
}
.dialogTableClassEdit .el-tree {
  max-height: 67vh;
  overflow: hidden;
  overflow-y: auto;
}
</style>
